<template>
  <div class="content">
    <van-search placeholder="请输入搜索关键词" v-model="value" />
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" width="100%" height="200"/>
        </van-swipe-item>
      </van-swipe>
      <div class="home-container">
        <div class="home-activity">
          <a v-for="menu in menus" :key="menu.id">
            <img :src="menu.imgsrc" width="80%" alt="">
            <span>{{menu.name}}</span>
          </a>
        </div>
        <h5>1</h5>
        <van-row>
          <van-col span="12" v-for="comm in commodity" :key="comm.id">
            <img :src="comm.imgsrc" alt="" width="100%">
          </van-col>
        </van-row>
      </div>
      <van-tabbar fixed:true v-model="active" >
        <van-tabbar-item icon="shop" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="bars" to="/class">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart" :info="shopCarNum" to="/shopcar">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager" to="/my">我的</van-tabbar-item>
      </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapState, mapMutations } from 'vuex'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar).use(TabbarItem)

export default {
  data () {
    return {
      value: '',
      active: 0,
      shopCarNum: '',
      images: [
        'http://img.zcool.cn/community/0372d195ac1cd55a8012062e3b16810.jpg',
        'http://img4.duitang.com/uploads/item/201402/14/20140214120558_2f4NN.jpeg'
      ],
      commodity: [
        {id: 1, title: '商品1', imgsrc: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2236280469,2297317816&fm=26&gp=0.jpg'},
        {id: 2, title: '商品2', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551895090838&di=3c267df65ce60b2dab98636d25814ddf&imgtype=0&src=http%3A%2F%2Fimgmini.dfshurufa.com%2Fmobile%2F20160206144315_e3180523146baea8bd347b562aecc013_2.jpeg'}
      ],
      menus: [
        {id: 1, name: '菜单1', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 2, name: '菜单2', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 3, name: '菜单3', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 4, name: '菜单4', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 5, name: '菜单5', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 6, name: '菜单6', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 7, name: '菜单7', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 8, name: '菜单8', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 9, name: '菜单9', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'},
        {id: 10, name: '菜单10', imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552413431898&di=923beef482d4bed7123b2ec3448a9458&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f6d058d9d6c0a801219c77562fcf.png%401280w_1l_2o_100sh.png'}
      ]
    }
  },
  computed: {
    ...mapState(['shopCar'])
  },
  mounted () {
    // 购物车显示数
    this.shopCarNum = this.shopCar.length
  },
}
</script>

<style scoped>
.home-container{
  padding:0 10px;
}
.home-activity{
  overflow: hidden;
}
.home-activity a{
  position: relative;
  float: left;
  width: 20%;
  text-align: center
}
.home-activity img{
  display: block;
  margin: 0 auto
}
.home-activity span{
  font-size: 0.5em;
}
</style>
